import { FieldProps } from '@rjsf/utils';
import { constraintMap } from '../../cmd-constrain/constant';

export default function ConstraintArraySchemaField(props: FieldProps) {
  const { registry, schema, formData, uiSchema } = props;
  const { SchemaField } = registry.fields;

  const icon =
    constraintMap.find((item) => item.const === formData.type)?.icon || null;

  const newProps = {
    ...props,
    required: false,
    title: '',
    schema: {
      ...schema,
      properties: {
        ...schema.properties,
        used: {
          ...(schema.properties as any).used,
          title: (
            <div className='inline-flex items-center'>
              {icon && (
                <span
                  className='icon'
                  style={{ marginRight: '8px' }}
                >
                  {icon}
                </span>
              )}
              {formData.title}
            </div>
          ),
        },
      },
    },
    uiSchema: {
      ...uiSchema,
      reuse: {
        'ui:disabled': !formData.used,
      },
      target: {
        'ui:disabled': !formData.used || formData.reuse,
      },
      reverse: {
        ...uiSchema.reverse,
        'ui:disabled': !formData.used,
      },
    },
  };

  return (
    <div>
      <SchemaField {...newProps} />
    </div>
  );
}
